<template>
  <div class="assets container_common1 flex flex_column">
    <div class="topBox">
      <div class="leftBoxs">
        <span class="span" @click="operateEvent(1)" :class="{'cur':operateType==1}">我要买</span>
        <span class="span" @click="operateEvent(2)" :class="{'cur':operateType==2}">我要卖</span>
        <img src="../../assets/images/home/xq_1.png" alt srcset class="iconBox" />
      </div>
    </div>
    <div class="operationTab c333">
      <div
        class="items c444"
        v-for="(item,i) in tabList"
        :key="i"
        @click="switchTab(i)"
        :class="{'cur':curType==i}"
      >
        <p>{{item.name}}</p>
        <p class="rename">{{item.reName}}</p>
        <span class="borderb"></span>
      </div>
    </div>
    <div class="contentBox mar_t_20" id='contentBox'>
      <div>
        <p v-if="operateType==1" class="size14 c000">{{payType==1?'购买金额':'购买数量'}}</p>
        <p v-else class="size14 c000">{{payType==1?'出售金额':'出售数量'}}</p>
        <div v-if="operateType==1">
          <div class="c000 size12 flex align_center bor_b" v-if='payType==1'>
            <span class="size20 mar_r_8">￥</span>
            <van-field v-model="number" placeholder="100起"  type="number"/>
          </div>
          <div class="c000 size12 flex align_center bor_b" v-else>
            <van-field v-model="number" placeholder="请输入购买数量" class="flex1"  type="number"/>
            <span class="size15 c222 font1">BTC</span>
          </div>
        </div>
        <div v-else>
          <div class="c000 size12 flex align_center bor_b"  v-if='payType==1'>
            <span class="size20 mar_r_8">￥</span>
            <van-field v-model="number" placeholder="可售0.00" class="flex1"  type="number"/>
            <span class="blue_text mar_l_10">全部</span>
          </div>
          <div class="c000 size12 flex align_center bor_b"  v-else>
            <van-field v-model="number" placeholder="可售0.000000" class="flex1"  type="number" />
            <span class="size15 c222 font1">BTC</span>
            <span class="blue_text mar_l_10">全部</span>
          </div>
        </div>

        <div class="flex-between size12 c444 payBox mar_t_10 align_center">
          <span>单价约65,489,15 CNY/BTC</span>
          <div class="rightBox flex-between align_center" @click="transEvent">
            <img
              src="../../assets/images/home/transIcon.png"
              alt
              srcset
              class="wid13 hei10 mar_r_8"
              
            />
            <span v-if="operateType==1">{{payType==1?'按数量购买':'按金额购买'}}</span>
            <span v-else>{{payType==1?'按数量出售':'按金额出售'}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t_50">
      <van-button type="info" block>购买</van-button>
    </div>
    <div class="c444 size12 mar_t_10">交易手续费：0元</div>
  </div>
</template>

<script>
import $ from "jquery";
import { mapActions } from "vuex";
export default {
  components: {},
  computed: {
    userId() {
      return this.$store.state.userId;
    }
  },
  mounted() {
    this.init();

    if (this.$store.state.nowThemeInfo == "night-theme") {
      $(".assets")
        .find(".operationTab")
        .css("background-color", this.$bg_night_second);
    } else {
      $(".assets")
        .find(".operationTab")
        .css("background-color", "#fff");
    }
    if (this.isNight == "night-theme") {
      //黑夜模式
      // $('.assets').find(".lists").find('.van-cell:not(:last-child)::after').style.borderBottom = 'none';
    } else {
      //白天模式
    }
  },
  data() {
    return {
      curType: 0,
      number: null,
      operateType: 1, //1买2卖
      payType: 1, //1按数量2按金额
      tabList: [
        {
          name: "比特币",
          reName: "BTC"
        },
        {
          name: "以泰坊",
          reName: "ETH"
        },
        {
          name: "泰达币",
          reName: "BTC"
        },
        {
          name: "以泰坊",
          reName: "ETH"
        },
        {
          name: "泰达币",
          reName: "BTC"
        }
      ]
    };
  },
  methods: {
    ...mapActions([
      "setnavTitle",
      "setnavBarState",
      "settabBarState",
      "setbackRouter",
      "setnavBarArrow",
      "setnavBarBgColor",
      "setCurrency",
      "setStatusBar"
    ]),
    init() {
      this.setnavTitle("");
      this.setbackRouter("");
      this.setnavBarState(true);
      this.settabBarState(false);
      this.setnavBarArrow(true);

      this.setnavBarBgColor("#4980E5");

      this.setCurrency("");
      this.setStatusBar("light");
    }, // 初始化页面
    //买卖切换
    operateEvent(num) {
      if (num == this.operateType) {
        return;
      }
      this.operateType = num;
      this.payType=1;
      this.number=null;
    },
    //支付方式切换
    transEvent() {
      if (this.payType == 1) {
        this.payType = 2;
        return;
      }
      this.payType = 1;
      this.number=null;
    },
    //切换
    switchTab(type) {
      if (type == this.curType) {
        return;
      }
      this.curType = type;
    }
  },

  destroyed() {
    this.setnavBarBgColor("");;
    // this.setStatusBar("dark");
  }
};
</script>
<style lang="scss">
.assets {
  .van-tabs__line {
    background-color: #3d77e0;
    height: 2px;
  }
  .van-tab--active {
    color: #3d77e0;
  }
  .contentBox {
    .van-cell {
      padding: 15px 0 ;
    }
    
  }
  #contentBox{
    .van-cell:not(:last-child)::after{
      border:none!important;
    }
  }
  .van-button--info {
    color: #fff;
    background-color: #3d77e0;
    border: 1px solid #3d77e0;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/theme.scss";
.assets {
  @include base-background();

  .topBox {
    color: #fff;
    padding: 15px 15px 0;
    margin: 0 -15px;
    height: 106px;
    background: #4880e5;
    .leftBoxs {
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      .span {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 30px;
        &.cur {
          font-weight: 500;
          font-size: 16px;
        }
      }
      .iconBox {
        width: 15px;
        height: 15px;
        right: 10px;
        position: absolute;
      }
    }
  }
  .operationTab {
    // @include base-background-second();

    display: flex;
    border-radius: 5px;
    padding: 20px 15px 0;
    margin-top: -50px;
    justify-content: space-between;
    box-shadow: 0px 3px 11px 1px rgba(121, 121, 121, 0.09);
    font-size: 14px;

    .items {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 15px;
      position: relative;
      justify-content: center;
      font-size: 12px;
      .rename {
        font-size: 14px;
        margin-top: 5px;
      }
      &.cur {
        color: #3d77e0;
        font-size: 13px;
        font-weight: 500;
        .rename {
          font-size: 15px;
          margin-top: 2px;
        }
        .borderb {
          background: #3d77e0;
          transition: all 0.5s;
        }
      }
      .borderb {
        position: absolute;
        bottom: 0;
        width: 37px;
        height: 2px;
        border-radius: 1px;
        background: transparent;
      }
    }
  }
  .accountBox {
    margin: 0 -15px !important;
    padding: 0 15px;
    // border-bottom: 1px solid rgba(227, 227, 227, 0.2);
    .items {
      padding: 15px 0;
      height: 52px;
      position: relative;
      font-size: 15px;
      text-align: center;

      .borders {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        width: 37px;
        height: 2px;
        background: transparent;
        border-radius: 2px;
      }
    }
    .cur {
      color: #3d77e0;
      .borders {
        background: rgba(61, 119, 224, 1);
      }
    }
  }
  .accountDetail {
    margin: 0 -15px;
    overflow-y: auto;
    .tops {
      padding: 10px 15px;
      background: #f8f7fd;
      .size12 {
        color: #666666;
      }
      .bottoms {
        margin-top: 5px;
        color: #444;
        font-size: 11px;
        .marks {
          font-size: 15px;
          color: #222222;
          margin-right: 8px;
        }
      }
    }
  }
  .contentBox {
    .payBox {
      .rightBox {
        color: #027bff;
      }
    }
  }
}
</style>